<template>
	<div class="tuiJian">
		<div class="title center flex-start">
			<img src="@/assets/image/zhuTi/t2.png" alt="" />
			<div class="f16 ctheme fbold">词云</div>
		</div>
		<div ref="wordcloudRef" id="echartsId" class="wordcloud"></div>
	</div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue"
import * as echarts from "echarts"
import "echarts-wordcloud"
const route = useRoute()
const router = useRouter()
const wordcloudRef = ref()
const props = defineProps({
	yunCi: {
		type: Array,
		default: () => [],
	},
})
const data = ref([])
const listStr = ref([])
async function list() {
	if (listStr.value != null) {
		let listArr = []
		listStr.value.forEach(item => {
			listArr.push({
				value: item.weight,
				name: item.word,
			})
		})
		data.value = listArr.sort((a, b) => b - a)
		initWordCloud(data.value)
	}
}
let myChart
let isMounted = false
watch(
	() => props.yunCi,
	() => {
		if (!isMounted) {
			setTimeout(() => {
				createCloud()
			}, 500)
			return
		}
		createCloud()
	},
	{
		deep: true,
		immediate: true,
	}
)

function createCloud() {
	if (!myChart) {
		myChart = echarts.init(wordcloudRef.value)
	}
	listStr.value = props.yunCi
	list()
}

// 初始化词云
const initWordCloud = (data, max = 72) => {
	myChart.on("click", function (params) {
		router.push({ path: "/search", query: { tag: params.data.name, tags: "03", active: "01" } })
	})
	const option = {
		// title: {
		// 	text: "关键词",
		// 	show: false,
		// },
		tooltip: {},
		series: [
			{
				type: "wordCloud",
				keepAspect: false,
				shape: "circle",
				left: "center",
				top: "center",
				width: "100%",
				height: "100%",
				gridSize: 8,
				right: null,
				bottom: null,
				sizeRange: [14, max],
				shrinkToFit: false,
				rotationRange: [-45, 45],
				rotationStep: 15, // 0 15 30 45 度倾斜
				layoutAnimation: true,
				drawOutOfBound: false,
				tooltip: {
					trigger: "item",
					formatter: function (name) {
						return name.data.name
					},
				},
				// 这是全局的文字样式，相对应的还可以对每个词设置字体样式
				textStyle: {
					fontFamily: "sans-serif",
					fontWeight: "bold",
					// 颜色可以用一个函数来返回字符串
					color: function () {
						// Random color
						return (
							"rgb(" +
							[
								Math.round(Math.random() * 160),
								Math.round(Math.random() * 160),
								Math.round(Math.random() * 160),
							].join(",") +
							")"
						)
					},
					emphasis: {
						textStyle: {
							shadowBlur: 10,
							shadowColor: "#333",
						},
					},
				},
				// Data is an array. Each array item must have name and value property.
				data: data,
			},
		],
	}
	option && myChart.setOption(option)
	window.addEventListener("resize", () => {
		if (myChart) {
			myChart.resize()
		}
	})
}

onMounted(async () => {
	isMounted = true
	// myChart = echarts.init(wordcloudRef.value)
})
</script>

<style lang="scss" scoped>
.wordcloud {
	width: 250px;
	height: 200px;
	overflow: scroll;
}
.tuiJian {
	width: 250px;
	background: #ffffff;
	border-radius: 3px;
	margin-left: 10px;
	margin-bottom: 15px;
	padding-bottom: 18px;

	.box {
		padding: 15px 20px 0;

		.circle {
			width: 5px;
			height: 5px;
			background: #dddfe6;
			border-radius: 50%;
			margin-right: 10px;
		}
	}

	.title {
		padding: 15px 25px;
		background: #eaf1ff;

		img {
			width: 18px;
			margin-right: 10px;
		}
	}
}
</style>
